Skip to content

Conversation

@kazzyfrog
Copy link
Member

概要

TOPページに、絵文字のアニメーションと、グラデーション背景を実装しました。

詳細は下記の通りです:

  • 絵文字は、google fontのNoto Emojiを使用
  • 各セクションに最大10個まで絵文字を表示する。
  • ホバーしたら、GitHubのアイコンが、好きな色のボーダー付きで表示される
  • 最も新しいコントリビューターの絵文字は、他より少し大きく1番上に表示される。
  • グラデーション背景は、最も新しいコントリビューターの好きな色を使用

関連するIssue

closed #185

その他

とりあえず、背景をやってしまわないと他が進まないかと思ったので、一旦現状のデザインで実装しました!
現在は、下記のスクショの状態です!

また、コンポーネント内で使う関数については、
utilsディレクトリを作成し、その中に関数を配置しました!

localhost_3000_ (4)

@kazzyfrog kazzyfrog added the Type: 🎨 style スタイル(見た目)に関するもの label May 19, 2024
@pss-aileen
Copy link
Collaborator

@kazzyfrog

PR、自分の能力でできる範囲、確認しました。

まだまだ難しい記述ができない自分にとって、コードの書き方が大変参考になりました。ありがとうございます。

以下気になる点をいくつか書いたので、ご確認よろしくお願いいたします。

  • ヒーローエリアの 下のほわほわ(語彙力なくてすみません....!)について
    • こちら、スクロール途中で header の First Contribution JA の上を通っていました
    • 修正が必要かと思いました
    • z-index 関連のCSSですかね、おそらく...!
  • 背景に表示される絵文字について
    • 絵文字の色ですが、背景色に馴染ませるために、半透明の色が良いかな〜と思いました!
    • そのため、絵文字の文字色用も作っていただいて、それをanimated-emoji.tsx に記述するのが良いのかな?と思いました!可能でしょうか?

余談

今、アイコンのホバーするとくるっとしてアイコンが見れるようになっていますが、ホバーしないと気が付かないので、ホバーせずに一定の間隔でくるっと反転して、戻る...といった動きになったら良いな〜と思いました(これは完成したあとにみなさんの同意があれば変更で良いかも、なので意見、案程度に受け流していただければ〜〜!!)

@kazzyfrog
Copy link
Member Author

確認ありがとうございます!!

ヒーローエリアの下のほわほわ(波のsvg)についての件、気づきませんでした!
修正いたします!

背景に表示される絵文字についても、半透明にしてみようと思います!
これに関して、

絵文字の文字色用も作っていただいて、それをanimated-emoji.tsx に記述する

これは、絵文字の色を、現在の黒から、
背景のグラデーションの色(今の場合青)の半透明に変更するという認識で合ってますでしょうか?

@kazzyfrog
Copy link
Member Author

確かに、ホバー時に表示が変わるのは、気づきずらいかもですね!

ホバーせずに一定の間隔でくるっと反転して、戻る...といった動き

良さそうです!👍

@pss-aileen
Copy link
Collaborator

@kazzyfrog

これは、絵文字の色を、現在の黒から、
背景のグラデーションの色(今の場合青)の半透明に変更するという認識で合ってますでしょうか?

そうですね!

スクリーンショット 2024-05-20 19 24 30

自分はコードに直接style書いて実験してたんですが、このぐらいになるとなじむのかな〜!と思いました

スクリーンショット 2024-05-20 19 26 07

@kazzyfrog
Copy link
Member Author

ありがとうございます!!
やってみます!

@kazzyfrog
Copy link
Member Author

kazzyfrog commented May 21, 2024

指摘していただいた、ヘッダーの重ね合わせと、絵文字の色を変更しました!
ついでに、気になった細かい表記も修正しました!

現在、デザインは以下のような状態です。
(デモとして、コントリビューター増やして、他の色でも見てみました)

半透明(0.5)だと、色によっては3セクション目などで見えづらくなるかも?です!
これは気になったらあとで、変更する感じでも良さそうです。
localhost_3000_ (3)

localhost_3000_ (2)

@pss-aileen
Copy link
Collaborator

@kazzyfrog

修正ありがとうございます!

波とヘッダーの重なり確認しました!

絵文字の色もありがとうございました。
色によっても結構かわりますね...!
すみません、きちんと確認できてませんでした...特に一番下のセクション...!!

そうですね...悩ましいですが、一旦このままですすめて、全体で落ち着いたらまたここを改善していけると嬉しいです!

不透明度を下げたり、もしくは絵文字の色を選択された色より少し暗くしたり、色々と対処の仕方があるような気がします!

なので、個人的にはこれでOKかなと思うのですが、
これって、もうmainにマージでよかったんですっけ...?

@kazzyfrog
Copy link
Member Author

了解です!確かに色々改善できそうですね!

ありがとうございます👍
mainにマージでOKです!

Copy link
Collaborator

@pss-aileen pss-aileen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMです!!✨

@pss-aileen
Copy link
Collaborator

すみません。
マージの仕方をすっかり忘れてしまったのですが
いくつかのコミットがあるので、squashでまとめてよかったでしょうか...?

そして、コミットメッセージは
「🎨 style: 絵文字のアニメーションを使った背景の実装 #185
もしくは
「✨ feat: 絵文字のアニメーションを使った背景の実装 #185
どちらが良いでしょうか...?
styleでしょうか...?

#169

@kazzyfrog
Copy link
Member Author

squashでまとめてOKです!

コミットメッセージに関しては、どちらか悩ましいですよね。。
確か、styleとか、docsは、修正でも追加でも、featやfixではない方向だった気がするので、
自分は、styleかなと思いました!

@pss-aileen
Copy link
Collaborator

@kazzyfrog
ありがとうございます!
styleでマージします!

@pss-aileen pss-aileen merged commit a3be167 into main May 22, 2024
@pss-aileen pss-aileen deleted the style/updated-dynamic-background-design-#185 branch May 22, 2024 10:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: 🎨 style スタイル(見た目)に関するもの

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TOPページの背景と絵文字のアニメーションを実装する

3 participants